<template>
  <div class="container-card">
<!--    <CodeHeader :title="$route.meta.name"></CodeHeader>-->
    <div class="card-tabs">
      <code-tabs v-model="tabActive" :tabs="tabs"></code-tabs>
    </div>
    <div class="card-content">
      <div v-if="tabActive === '01'" class="cards-item">
        <!--        :style="{ 'margin-top': `${key === 0 ? 0 : -46}px` }"-->
        <code-card
          v-for="(card, key) in testCards"
          :key="key"
          :index="key"
          :cardInfo="card"
          :style="{ 'margin-top': '15px' }"
        ></code-card>
        <div v-if="testCards.length === 0" class="no-cards">
          <img src="../../assets/img/ka.png" width="60" />
          <p>暂无卡证～</p>
        </div>
      </div>
      <div v-if="tabActive === '02'" class="vouchers-item">
        <div v-if="testTickets.length === 0" class="no-cards">
          <img src="../../assets/img/quan.png" width="60" />
          <p>暂无票券～</p>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            :loading="fresh"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
          >
            <code-ticket
              v-for="(ticket, key) in testTickets"
              :key="key"
              :index="key"
              :ticketInfo="ticket"
              :style="{ 'margin-bottom': `10px` }"
            ></code-ticket>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import CodeTabs from "@/components/code/Tabs";
import CodeCard from "@/components/code/Card";
import CodeTicket from "@/components/code/Ticket";
import CodeHeader from "@/components/code/Header";
import { storage } from "../../plugins/storage";
import { getSSCApplyInfo } from "@/apis/test";

const tabs = [
  {
    name: "卡证",
    key: "01"
  },
  {
    name: "票券",
    key: "02"
  }
];

export default {
  name: "CodeMineCard",
  components: {
    CodeTabs,
    CodeCard,
    CodeTicket,
    CodeHeader
  },
  created() {
    this.initData();
  },
  mounted() {
    document.title = "我的卡包";
  },
  data() {
    return {
      tabActive: "01",
      totalPage: "",
      search: {
        cardType: "",
        pageNo: 0,
        pageSize: 8
      },
      tabs,
      testCards: [],
      testTickets: [],
      fresh: false,
      finished: false,
      isLoading: false
    };
  },
  watch: {
    tabActive(newL) {
      if (newL === "02") {
        // this.$router.push("/building");
      }
      this.tabActive = newL;
      this.search.pageNo = 0;
      this.search.pageSize = 8;
      this.search.cardType = newL;
      this.getCardInfo();
    }
  },
  methods: {
    initData() {
      this.checkEssc();
      this.getCardInfo();
    },
    checkEssc() {
      getSSCApplyInfo().then(res => {
        if (
          res.data &&
          (res.data.signFlag === "0" || res.data.signFlag === "2")
        ) {
          this.$dialog
            .alert({
              message: "您已注销一码通服务。"
            })
            .then(() => {
              location.href = "yi-code://home";
            });
        }
      });
    },
    onRefresh() {
      this.search.pageNo = 0;
      this.getCardInfo();
    },
    onLoad() {
      this.search.pageNo++;
      if (this.search.pageNo > this.totalPage) {
        this.finished = true;
      } else {
        this.getCardInfo();
      }
    },
    async getCardInfo() {
      this.search.cardType = this.tabActive;
      let res = await this.api.getVoucher(this.search);
      this.totalPage = res.totalPages;
      this.handleCards(res.data);
    },
    handleCards(vouchers) {
      let all = this.modelFunctions.sortCards(storage.get("cards"));
      // let all = this.modelFunctions.sortCards(localData.cards);
      if (this.search.cardType === "01") {
        this.testCards = this.modelFunctions.transCards(
          all,
          // localData.vouchers
          vouchers
        );
      } else if (this.search.cardType === "02") {
        this.testTickets = [];
        // this.testTickets = this.modelFunctions.transIcon(vouchers);
        // this.testTickets = this.modelFunctions.transVouchers(
        //   all,
        //   // localData.vouchers
        //   vouchers
        // );
      }
      this.fresh = false;
      this.isLoading = false;
    }
  }
};
</script>

<style lang="less" scoped>
.container-card {
  background: #ffffff;

  .card-tabs {
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 10;

    .tabs {
      box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .card-content {
    padding-top: 40px;
    z-index: 2;

    .cards-item {
      margin-top: 15px;
    }
    .vouchers-item {
      margin: 15px;
    }
  }
  .main {
    padding: 20px 15px;
  }

  .no-cards {
    text-align: center;
    margin-top: 75px;
    color: #515151;
    font-size: 14px;
    p {
      margin-top: 15px;
    }
  }
}
</style>
